﻿@page "/ribbontabs"

<h3>RibbonTab 选项卡</h3>

<h4>Office 菜单选项卡</h4>

<DemoBlock Title="基本用法" Introduction="通过设置 <code>Items</code> 初始化选项卡" Name="Normal">
    <RibbonTab Items="@Items" />
</DemoBlock>

<DemoBlock Title="可悬浮" Introduction="通过设置 <code>ShowFloatButton</code> 使选项卡右侧显示收缩按钮，不占用主窗体空间" Name="Float">
    <div class="ribbon-demo">
        <RibbonTab Items="@Items" ShowFloatButton="true" />
        <div class="ribbon-demo-body">
            我是正文内容，收起菜单后我会向上移动
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="右上角按钮模板" Introduction="通过设置 <code>RightButtonsTemplate</code> 可以在选项卡右上角增加一些快捷按钮" Name="RightButtonsTemplate">
    <RibbonTab Items="@Items" ShowFloatButton="true">
        <RightButtonsTemplate>
            <div class="ribbon-button">
                <i class="fa-regular fa-circle-question"></i>
                <span>文档</span>
            </div>
        </RightButtonsTemplate>
    </RibbonTab>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
